<template>
  <div>
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div>
        <div style="margin: 10px 0">
          <!--    搜索区-->
          <div style="margin: 10px 0;display:flex;">
           
            <div style="flex:0,1,12%">
              <span style="margin-left: 15px; margin-right: 14px; font-size: 15px; font-weight: 700;">用户ID</span>
              <el-input v-model.number="s_userId" size="small" clearable placeholder="请输入id" prefix-icon="el-icon-search"
                style="width: 60%;" />
            </div>
            <div style="flex:0,1,12%">
              <span style="margin-left: 15px; margin-right: 14px; font-size: 15px; font-weight: 700;">昵称</span>
              <el-input v-model.number="s_userName" size="small" clearable placeholder="请输入id" prefix-icon="el-icon-search"
              style="width: 60%;" />
            </div>
            <div style="flex:0,1,12%">
              <span style="margin-left: 15px; margin-right: 14px; font-size: 15px; font-weight: 700;">籍贯</span>
              <el-input v-model.number="s_userArea" size="small" clearable placeholder="请输入籍贯" prefix-icon="el-icon-search"
                style="width: 60%;" />
            </div>
            <div style="flex:0,1,10%">
              <span style="margin-left: 15px; margin-right: 14px; font-size: 15px; font-weight: 700;">性别</span>
              <el-select v-model="s_sex" size="small" placeholder="请选择" clearable style="width:40%;margin-right: 20px;">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>

              </el-select>
            </div>
            <div style="flex:0,1,10%">
              <span style="margin-left: 20px; margin-right: 14px; font-size: 15px; font-weight: 700;">状态</span>
              <el-select v-model="value" size="small" placeholder="请选择" clearable style="width:44%;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>



              </el-select>
            </div>
         
            <div style="margin-right: 15px;width: 200px;">

              <el-button icon="el-icon-search" @click="load" style="background-color: #143371; color: aliceblue;width: 50%;font-size: 12px;"
                size="mini">搜搜</el-button>
              <el-button icon="el-icon-refresh-left" style="margin-left: 5px;width: 45%;font-size: 12px;" @click="reset" size="mini">重置</el-button>
            </div>

            <div style="flex:0,1,8%">
              <download-excel
                class="export-excel-wrapper"
                :data="tableData"
                :fields="json_fields"
                type="xls"
                worksheet="My Worksheet"
                name="用户信息"
    >
      <el-button style="background-color: #143371; color: aliceblue;"
                size="mini">导出</el-button>
    </download-excel>
            </div>
            <div style="width: 65px;">
              <el-button icon="el-icon-message" @click="handleMsg2()" style="background-color: #143371; color: aliceblue;width: 100%;font-size: 12px;"
                size="mini" :disabled="!mutilSeclected">私信</el-button>
            </div>
          </div>
        </div>
        


        <!-- 用户ID:'userId',
        昵称:'userName',
        籍贯:'userArea',
        电话:'browserType',
        订单数:'orderNum',
        消费金额:'sumPirce',
        性别:{
          field: "sex",
          //自定义回调函数
          callback: value => {
            if(value==null){
              return '未知'
            }
            else if(value==1){
              return '男'
            }
            else{
              return '女'
            }
          }
        } -->
        <!--    表格-->
        <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%" :row-style="{ height: '32px' }"
          :cell-style="{ padding: '4px' }"  ref="multipleTable"  @selection-change="handleSelectionChange">

          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="#" type="index" />
           
          <el-table-column label="用户ID" prop="userId" />
          <el-table-column label="昵称" prop="username" width="100px"/>
          <el-table-column label="性别" width="60px">
            <template slot-scope="scope">
              <span v-if="scope.row.sex==null">保密</span>
              <span v-else-if="scope.row.sex==1">男</span>
              <span v-else>女</span>
            </template>
          </el-table-column>
          <el-table-column label="头像" width="120px" style="text-align: center;">
            <template slot-scope="scope">
              <img :src="scope.row.userAvatar" alt="" style="width: 90px;height: 68px;">
            </template>
          </el-table-column>
          <el-table-column label="籍贯" prop="userArea" width="100px"/>
          <el-table-column label="电话" prop="phone" width="120px"/>
          <el-table-column label="订单数" prop="orderNum" width="70px"/>
          
          <el-table-column label="消费额/￥" prop="sumPrice" sortable/>
          <el-table-column label="发攻略数" prop="strategyNum" sortable/>

          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag v-if="!scope.row.status" type="danger">封禁</el-tag>
              <el-tag v-else type="primary">正常</el-tag>
             
            </template>
          </el-table-column>

          <!--      操作栏-->
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status && scope.row.username!='管理员'" size="mini" type="danger" @click="handleStatus(scope.$index, scope.row,false)">封禁</el-button>
              <el-button v-if="!scope.row.status && scope.row.username!='管理员'" size="mini" type="primary" @click="handleStatus(scope.$index, scope.row,true)">解禁</el-button>
             

      
              <el-button v-if="scope.row.username!='管理员'" size="mini" type="primary" :disabled="mutilSeclected" @click="handleMsg(scope.$index, scope.row)">私信</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div style="margin: 10px 0">
          <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[6, 10]" :total="total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="发送消息" width="50%" @close="cancel" top="30px">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" style="width: 80%" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="context">
              <el-input v-model="form.context" style="width: 80%"  placeholder="请输入内容" type="textarea"
                    autosize>
                  </el-input>
            </el-form-item>
            
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
              </span>
            </template>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: "UserInfo",
  data() {



    return {
      rules:{
        title: [{
          required: true, message: "请输入标题", trigger: "blur" 
        }],
        context: [{
          required: true, message: "请输入标题", trigger: "blur" 
        }],

      },

      form:{
        title:'',
        context:''
      },
      s_userId:null,
      s_userName:null,
      s_userArea:null,
      s_sex:null,
      selectedToMsgUserId:[],
      options2: [
        {
          value: 0,
          label: '女'
        },
        {
          value: 1,
          label: '男'
        },
       
      ],
      options: [
        {
          value: 0,
          label: '封禁中'
        },
        {
          value: 1,
          label: '正常'
        },
       
      ],
      multipleSelection: [],
      mutilSeclected:false,
      value: '',
      loading: true,
      editJudge: true,
      judge: false,
      dialogVisible: false,
      search: "",
      currentPage: 1,
      pageSize: 6,
      total: 0,
      CoverdialogVisible: false,
      MoredialogVisible: false,
      json_fields:{
        用户ID:'userId',
        昵称:'userName',
        籍贯:'userArea',
        电话:'phone',
        订单数:'orderNum',
        消费金额:'sumPirce',
        性别:{
          field: "sex",
          //自定义回调函数
          callback: value => {
            if(value==null){
              return '未知'
            }
            else if(value==1){
              return '男'
            }
            else{
              return '女'
            }
          }
        },
        发布攻略数:'strategyNum'
      },
      tableData: [
        {
          userId: 20001001,
          userName: 'zjc',
          userArea: '江西南昌',
          phone:'12345678910',
          sex: 1,
          userAvatar: 'https://gzz-project-file.oss-cn-guangzhou.aliyuncs.com/Avatar/e6a3ec72-9c03-4c7d-89ad-98ce5b6f7755.JPG',
          orderNum: 3,
          sumPrice: 1000,
          strategyNum:2,
          status:1
        },
        {
          userId: 20001002,
          userName: 'zzzjc',
          userArea: '江西省抚州',
          phone:'12365678910',
          sex: 1,
          userAvatar: 'https://gzz-project-file.oss-cn-guangzhou.aliyuncs.com/Avatar/e6a3ec72-9c03-4c7d-89ad-98ce5b6f7755.JPG',
          orderNum: 5,
          sumPrice: 1200,
          strategyNum:1,
          status:1
        }
      ],



      editDisplay: {
        display: "block",
      },
      display: {
        display: "none",
      },
    };
  },
  created() {
    this.load();
    this.loading = true;
    setTimeout(() => {
      //设置延迟执行
      this.loading = false;
    }, 1000);
  },
  methods: {
    handleStatus(index, row, status) {
      if(!status){
        this.$confirm("你确定封禁"+row.userId+"吗？",{
        iconClass: "el-icon-question", //自定义图标样式
        confirmButtonText: "确认", //确认按钮文字
        cancelButtonText: "取消", //取消按钮文字
        showClose: true, //是否显示右上角关闭按钮
        type: "warning", //提示类型  success/info/warning/error
      }).then(()=>{
        request.get("/user/updateStatus",{
          params:{
            userId:row.userId,
            status:status
          }
        }).then(res=>{
          if(res.code==='1'){
            this.tableData[index].status = status
          }
        })
      
      }).catch(()=>{
        alert("取消")
      })
      }else{
        request.get("/user/updateStatus",{
          params:{
            userId:row.userId,
            status:status
          }
        }).then(res=>{
          if(res.code==='1'){
            this.tableData[index].status = status
          }
        })
       
      }
     
     
    },
  
    async load() {
      /**
       *   s_userId:null,
      s_userName:null,
      s_userArea:null,
      s_sex:null,
       */
      request.get("/user/adminlist", {
            params: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                userId:this.s_userId,
                userName:this.s_userName,
                sex:this.s_sex,
                userArea:this.s_userArea,
                status:this.value
            },
        }).then((res) => {
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
        });
    },
    reset() {
      this.value = null
      this.s_userId=null
      this.s_userName=null
      this.s_userArea=null
      this.s_sex=null
      this.load()
    },
   
    handleMsg(index, row) {
      this.dialogVisible = true;
      this.selectedToMsgUserId = []
      this.selectedToMsgUserId.push(row.userId)
      console.log(this.selectedToMsgUserId)
    },
    handleMsg2() {
      this.dialogVisible = true;
      this.selectedToMsgUserId = []
      this.multipleSelection.forEach(row=>{
        this.selectedToMsgUserId.push(row.userId)
      })
      console.log(this.selectedToMsgUserId)
     
    },
    cancel() {
      this.$refs.form.resetFields();
      this.dialogVisible = false; 
      this.selectedToMsgUserId = null
    },
    handleSizeChange(pageSize) {
      //改变每页个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变页码
      this.currentPage = pageNum;
      this.load();
    },
    handleSelectionChange(val) {
        this.multipleSelection=val
        if(this.multipleSelection.length>0){
          console.log(true)
          this.mutilSeclected = true
        }else{
          console.log(false)
          this.mutilSeclected = false
        }
      },
    save(){
      //发送请求
      this.form.userId = this.selectedToMsgUserId[0];
      request.put("/system-message/sadd", this.form).then(res => {
              if (res.code === "1") {
                this.$message({
                  type: 'success',
                  message: '发送成功'
                })
                 this.load()
                  this.dialogVisible = false
                  this.form = {}
              }
              else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
              }
            })
            this.dialogVisible = false; 
            this.selectedToMsgUserId = null
    }
  }



}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

// 这个规则设置了在展开行内容中的标签样式
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

// 这个规则设置了在展开行内容中的表单项样式
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
  display: block;
}
</style>